<template>
  <div class="pages brandClass">
    <div class="pageLevel" v-if="!sub">

      <div class="tableSearch">
        <el-form size="small">
          <el-form-item label="" label-width="0">
            <el-input clearable v-model="selectdata.keyword" placeholder="请输入商品名称"></el-input>
          </el-form-item>
          <el-form-item label="" label-width="15px">
            <el-button type="primary" @click="_handleSearch">查询</el-button>
          </el-form-item>
        </el-form>
      </div>

      <div class="tableMain">
        <el-table :data="tableData" stripe style="width: 100%">
          <el-table-column align="center" label="商品名称" prop="goodsName"></el-table-column>
          <el-table-column align="center" label="商品单价" prop="goodsPrice"></el-table-column>
          <el-table-column align="center" label="采供单位" prop="unitName"></el-table-column>
          <el-table-column align="center" label="规格型号" prop="goodsSpec">
            <template slot-scope="scope">
              <div v-for="(item, index) in  scope.row.goodsSpec" :key="index" v-if="item">
                <span>{{item.paramName}} :</span>
                <span>{{item.paramValue}} </span>
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="barCode" label="商品条形码" width="100"></el-table-column>
          <el-table-column align="center" prop="goodsCode" label="商品货号"></el-table-column>
           <el-table-column prop="isFreight" label="是否含运费" align="center" width="100">
            <template slot-scope="scope">
              <span v-if="scope.row.isFreight=='1'">是</span>
              <span v-if="scope.row.isFreight=='0'">否</span>
            </template>
          </el-table-column>
          <el-table-column prop="freight" label="运费" align="center">

          </el-table-column>
          <el-table-column align="center" label="操作" >
            <template slot-scope="scope">
              <el-button size="small"  type="text" @click="_handleCheck(scope.row.goodsId)">查看详情</el-button>
            </template>
          </el-table-column>
        </el-table>
        <page-unit :pageData="pageData" :func="_getAgreement"></page-unit>
      </div>
    </div>
    <div class="pageLevel" v-else>
      <router-view></router-view>
    </div>
  </div>
</template>
<script>
import pageUnit from "@/components/Page";
import { mapState } from "vuex";
import util from "@/util";
import { getPurchaseGoodsPage } from "@/api";
export default {
  components: { pageUnit },
  computed: mapState(["sub", "power", "merchantId"]),
  data () {
    return {
      pageData: {
        pageSize: 20,
        currentPage: 1,
        totalItems: 0,
        pageSizeArr: [5, 10, 20]
      },
      selectdata: {
        keyword: ""
      },
      tableData: []
    };
  },
  created () { },
  mounted () {
    this._getAgreement(20, 1);
  },
  methods: {
    //配置权限
    setRole (key) {
      return util.selectTitle(this.power, key)
    },
    // 获取表格数据
    _getAgreement (pageSize, pageNum) {
      let data = {
        goodsName: this.selectdata.keyword,
        pageSize: pageSize,
        pageNum: pageNum,
        shopId: this.merchantId
      };
      getPurchaseGoodsPage(data).then(res => {
        this.pageData.totalItems = res.data.pageTotal;
        this.tableData = res.data.list;
      });
    },
    // 查询
    _handleSearch () {
      this._getAgreement(this.pageData.pageSize, 1);
    },
    // 查看
    _handleCheck (id) {
      util.routerTo("/operate-management/goods-management/goods-goodslist/goods-goodEditnew", {
        goosId: id
      });
    }
  }
};
</script>
